

<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="科室名称">
          <a-select placeholder="请输入科室名称" v-decorator="['depName', {rules: [{ required: true, message: '请输入科室名称'}]}]">
            <a-select-option
              v-for="letter in dataSourceye"
              :key="letter"
              :value="`${letter.depName}`"
            >{{letter.depName}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="请选择类型"
        >
          <a-select placeholder="请选择" v-decorator="['categoryType', {rules: [{required: true,message: '请选择文章类型'}]}]">
            <a-select-option value="1">期刊文献</a-select-option>
            <a-select-option value="2">医学图形库</a-select-option>
            <a-select-option value="3">临床专家</a-select-option>
            <a-select-option value="4">既往典型病例</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="标题名称">
          <a-input placeholder="请输入标题名称" v-decorator="['titleName', {rules: [{ required: true, message: '请输入标题名称'}]}]" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="请选择图片">
          <a-upload
            action="http://123.56.85.94:8081/zkxh-emr/fastdfs/fileUpload"
            listType="picture"
            :headers="uploadGetHeaders"
            @preview="handlePreview"
            @change="handleChange"
            v-decorator="['pictureUrl',{}]"
          >
            <a-button> <a-icon type="upload" />上传图片</a-button>
          </a-upload>
        </a-form-item>
        <a-form-item v-if="isShowImgUrl">
          <div class="current-img-url">
            <img :src="`http://123.56.85.94:2020/${curentPictureUrl}`"/>
            <span>{{ curentPictureUrl }}</span>
            <i class="iconfont iconcross" @click="clearCurrentImgUrl"></i>
          </div>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="请输入简述">
          <a-input placeholder="请输入简述" v-decorator="['resume', {rules: [{ required: true, message: '请输入简述'}]}]" />
        </a-form-item>
        
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="内容标签">
          <a-input placeholder="请输入内容标签" v-decorator="['contentLabel', {rules: [{ required: true, message: '请输入内容标签'}]}]" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="正文">
          <j-editor v-decorator="[ 'mainBody', {} ]" triggerChange  placeholder="请输入正文"></j-editor>
          <!-- <a-textarea placeholder="请输入正文" :rows="5" v-decorator="['mainBody', {rules: [{ required: true, message: '请输入正文'}]}]"/> -->
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import { getAction} from '@/api/manage'
import JEditor from '@/components/jeecg/JEditor'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { isNumber } from '@/utils/util.js'
export default {
  name: 'KnoPublicModal',
  components:{
    JEditor,
  },
  data() {
    return {
      title: '操作',
      visible: false,
      dataSourceye: [],
      imgFile: [],
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      headers:{},
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        list: '/knowledge/knoCgOwner/getDepAll',

        add: '/knowledge/knoPublic/add',
        edit: '/knowledge/knoPublic/edit',
        uploadImg: '/FastDFSFileController/fileUpload'
      },
      pictureUrl: '',
      categoryTypeAry: [{id: '0',name: ''},{id: 1,name:'期刊文献'},{id: 2, name: '医学图形库'},{id: 3,name: '临床专家'},{id:4,name:'既往典型病例'}],
      curentPictureUrl: "",//点击编辑时显示当前图片地址
      isShowImgUrl: false,//点击编辑后是否显示当前图片信息
      imgTotal: 0,
    }
  },
  computed:{
    accessToken() {
      return Vue.ls.get(ACCESS_TOKEN)
    },
  },
  created() {
    getAction(this.url.list).then(res => {
      if (res.success) {
        this.dataSourceye = res.result
      }
      if (res.code === 510) {
        this.$message.warning(res.message)
      }
      this.loading = false
    })
  },
  methods: {
		normFile(e) {
			console.log('Upload event:', e);
			if (Array.isArray(e)) {
				return e;
			}
      this.imgTotal = 1;
			return e && e.fileList;
		},
    clearCurrentImgUrl(){
      this.isShowImgUrl = false;
    },
    handleCancel () {
      this.previewVisible = false
    },
    handlePreview (file) {
      this.previewImage = file.url || file.thumbUrl
      this.previewVisible = true
    },
    
		handleChange(info) {
			if (info.file.status !== 'uploading') {
        this.pictureUrl = info.file.response.url;
			}
			if (info.file.status === 'done') {
        this.isShowImgUrl = false;
        this.imgTotal = 1;
				this.$message.success(`${info.file.name} file uploaded successfully`);
			} else if (info.file.status === 'error') {
				this.$message.error(`${info.file.name} file upload failed.`);
			}
		},
    uploadGetHeaders() {
      return headers['X-Access-Token'] = this.accessToken
    },
    add() {
      this.edit({})
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.model.categoryType = this.categoryTypeAry[this.model.categoryType].name;
      this.curentPictureUrl = this.model.pictureUrl;
      this.isShowImgUrl = true;
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(this.model, 'depName', 'categoryType', 'titleName', 'pictureUrl', 'resume', 'mainBody', 'contentLabel')
        )
        //时间格式化
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
      
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.model, values)
          this.categoryTypeAry.forEach((item,index) => {
            if(formData.categoryType == item.id || formData.categoryType == item.name){
              formData.categoryType = item.id;
            }
          })
          formData.pictureUrl = this.curentPictureUrl;
          console.log("=======++++++++S"+JSON.stringify(formData));
          httpAction(httpurl, formData, method)
          .then(res => {
            if (res.success) {
              that.$message.success(res.message)
              this.imgFile = [];
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          })
          .finally(() => {
            that.confirmLoading = false
            that.close()
          })
        }
      })
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style lang="less" scoped>
  .current-img-url{
    width: 67%;
    margin: 0px auto;
    margin: -20px 0px 0px 21%;
    border: thin solid #e8e9ed;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    position: relative;
    img{
      width: 50px;
      margin-right: 5px;
    }
    i{
      position: absolute;
      right: 5px;
      top: 0px;
    }
  }
  /deep/ .ant-tabs-nav .ant-tabs-tab {
    color: #38c3c8;
  }
  /deep/ .ant-tabs-nav .ant-tabs-tab:hover {
    color: #38c3c8;
  }
  /deep/ .ant-tabs-ink-bar {
    background-color: #38c3c8;
    height: 2px;
  }
  /deep/ .input-table .tbody .td input[data-v-2f0c1ef1]:hover{
    border-color: #38c3c8;
  }
</style>